<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const rose = ref(null)

// 颜色集
const colorList = [
  '#7AC2F9',
  '#FFB3F4',
  '#BDF3FF',
  '#D2D2FF',
  '#DCDCFF',
  '#A4A4FE',
  '#B8B8FF',
  '#CDB3FF',
  '#E3D2FF',
  '#FFDEFC',
  '#FF8F8F',
  '#FF9D83',
  '#FFBC80',
  '#FFEC9C',
  '#E5FF9C',
  '#A9FFA9',
  '#8AF9C3',
  '#99FFF3',
  '#C5ECFF',
  '#BBE2F9',
  '#82F9F6',
  '#80EDFF',
  '#79D9F7',
  '#FFA9D4',
  '#FFBOBO',
  '#FFBCA4',
  '#FFD6A9',
  '#FFF3C0',
  '#E9FFC2',
  '#COFFC6',
  '#AAF7D6',
  '#ABFFF9',
  '#A0F5F9',
  '#A1E9FF',
  '#9ADBFC',
  '#9BC8F9',
  '#B3B3FF',
  '#C2C2FF',
  '#E4C5FF',
  '#FFCCF3',
  '#FFC2DB',
  '#FFDCDC',
  '#FFE4DC',
  '#FFEDDC',
  '#FFD4EE'
]

// 数据集
const echartsData = [
  { value: 40, name: 'rose 1' },
  { value: 38, name: 'rose 2' },
  { value: 32, name: 'rose 3' },
  { value: 30, name: 'rose 4' },
  { value: 28, name: 'rose 5' },
  { value: 26, name: 'rose 6' },
  { value: 22, name: 'rose 7' },
  { value: 18, name: 'rose 8' }
]

const init = () => {
  const chart = echarts.init(rose.value)
  const option = {
    backgroundColor: 'rgba(0,0,0,0)',
    color: colorList,
    legend: {
      orient: 'horizontal',
      icon: 'circle',
      top: 0,
      itemGap: 10,
      itemWidth: 8,
      itemHeight: 8,
      textStyle: {
        color: '#666',
        fontSize: 10
      },
      data: echartsData?.map((x) => x.name)
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['30%', '60%'],
        center: ['50%', '50%'],
        roseType: 'radius',
        label: {
          show: true,
          position: 'outside',
          fontSize: 10,
          formatter: (params) => {
            return `{a|${params.name}}`
          },
          rich: {
            a: {
              align: 'left',
              fontSize: 8
            }
          }
        },
        labelLine: {
          length: 0,
          length2: 5
        },
        data: echartsData.map((item, index) => {
          return {
            ...item,
            label: {
              color: colorList[index]
            }
          }
        })
      }
    ]
  }
  chart.setOption(option)
}

onMounted(() => {
  init()
})
</script>

<template>
  <div ref="rose" style="width: 230px; height: 210px"></div>
</template>

<style lang="scss" scoped></style>
